import Taro, {Component} from '@tarojs/taro'
import {View, Button, Text} from '@tarojs/components'
import './index.scss'
import classNames from "classnames";
import {connect} from '@tarojs/redux'

// import * as AnimationData from '../../assets/lottie/wx.json'

@connect(state => ({...state.product}), null)
class Fix extends Component {

  // config = {
  //   // 定义需要引入的第三方组件
  //   // usingComponents: {
  //   //   "lottie": "../../wxComponents/lottie-miniapp"
  //   // }

  // }

  static defaultProps = {
    placement: 'bottom',
    showHaibao: false,
    showHeart: false,
    showSucai: false,
    showMessageCard: false,
    showModify: false,
    sendMessageImg: '',
    sendMessagePath: '',
    sendMessageTitle: '',
  };

  config = {
    // "usingComponents":{
    //     "lottie": "../../wxComponents/lottie-miniapp/component/lottie"
    // }
    "disableScroll": true
  }

  constructor(props) {
    super(props)
  }

  static options = {
    addGlobalClass: true
  }

  componentWillMount() {
  }

  componentDidMount() {

  }

  componentDidShow() {

  }

  componentDidHide() {
  }

  componentCatchError() {
  }


  share() {
    this.props.onShare();
  }

  like(result) {
    this.props.onHandleLike(result)
  }

  seeSucai() {
    this.props.onHandleSucai()
  }

  modify() {
    this.props.onModify()
  }

  render() {
    const {
      placement, showHaibao, showHeart, showSucai,
      showMessageCard,
      sendMessageImg,
      sendMessagePath,
      sendMessageTitle,
      showModify
    } = this.props
    const {like} = this.props
    return (
      <View catchtouchmove={true} className={classNames('fix-model', {'fix-top-modal': placement == 'top'},
        {'fix-bottom-modal': placement == 'bottom'})}>
        {
          showHaibao &&
          <Button className="fix-button" onClick={this.share.bind(this)}>
            <Text className="icon icon-pengyouquanfangxing fix-icon"></Text>
            <Text className="fix-desc" decode={true}>海报</Text>
          </Button>
        }
        <Button className="fix-button" open-type="share">
          <Text className="icon icon-fenxiang fix-icon"></Text>
          <Text className="fix-desc" decode={true}>分享</Text>
        </Button>
        {
          showHeart &&
          <Button className="fix-button" onClick={this.like.bind(this, like)}>
            <Text
              className={classNames('fix-icon', 'at-icon', {'at-icon-heart-2': like}, {'at-icon-heart': !like})}
              style={{'color': like ? 'red' : '#fff'}}
            ></Text>
            <Text className="fix-desc" decode={true}>收藏</Text>
          </Button>
        }
        <Button open-type='contact' session-from='' className="fix-button" showMessageCard={showMessageCard}
                sendMessageImg={sendMessageImg} sendMessagePath={sendMessagePath} sendMessageTitle={sendMessageTitle}>
          {/* animationData */}
          {/* path="http://qamjze7eb.bkt.clouddn.com/lottie.json" */}
          {/* <lottie id="lottie" animationData={Anim}  width="80" height="80"/> */}
          {/* <Canvas id="wx-canvas" canvasId="wx-canvas"></Canvas> */}
          {/* {this.props.children} */}
          {/* <Text class="iconfont icon-kefu"></Text> */}
          {/* <IconFont name="kefu"></IconFont> */}

          <Text className="icon icon-kefu fix-icon"></Text>
          <Text className="fix-desc" decode={true}>客服</Text>
        </Button>
        {
          showSucai &&
          <Button className="fix-button" onClick={this.seeSucai.bind(this)}>
            <Text className="icon icon-sucai fix-icon"></Text>
            <Text className="fix-desc" decode={true}>素材</Text>
          </Button>
        }
        {
          showModify &&
          <Button className="fix-button" onClick={this.modify.bind(this)}>
            <Text className="icon icon-ico_compile_thick fix-icon"></Text>
            <Text className="fix-desc" decode={true}>编辑</Text>
          </Button>
        }

        {/* http://qamjze7eb.bkt.clouddn.com/wx.json */}
        {/* <AtFab size="small" className="fix-fab">
          <AtButton open-type='contact' session-from='' className="fix-button">
            222
          </AtButton>
        </AtFab> */}
      </View>
    )
  }
}

export default Fix
